<template>
  <page-header-wrapper :title="false">
    <el-card class="box-card">
      <div slot="header" class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :span="6">
              <a-form-item label="所属保司">
                <a-select show-search v-model="queryParam.companyId" :filter-option="filterOption">
                  <a-select-option v-for="item in companyList" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="产品名称">
                <a-input v-model="queryParam.name" placeholder="请输入:产品名称" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-button style="margin-right: 8px" type="primary" @click="query">查询</a-button>
              <a-button style="margin-right: 8px" @click="reset">重置</a-button>
              <a-button icon="plus" style="margin-right: 8px" type="primary" @click="handleAdd">新建</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="所属保司" prop="companyName" align="center" width="150"/>
        <el-table-column label="所属险种" align="center" width="150">
          <!-- 险种类型:1重疾险｜2寿险｜3医疗险｜4意外险 -->
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.productType) === 1">重疾险</el-tag>
            <el-tag v-if="parseInt(scope.row.productType) === 2">寿险</el-tag>
            <el-tag v-if="parseInt(scope.row.productType) === 3">医疗险</el-tag>
            <el-tag v-if="parseInt(scope.row.productType) === 4">意外险</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" prop="name" align="center" width="200" />
        
        <el-table-column label="产品组合" align="center" width="150">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.isGroup) === 0">否</el-tag>
            <el-tag type="danger" v-if="parseInt(scope.row.isGroup) === 1">{{scope.row.groupName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="产品标签" prop="labelList" align="center" width="200">
          <template slot-scope="scope">
            <el-tag v-for="(item,index) in scope.row.labelList" :key="index" :disable-transitions="false"
              style="margin-right: 15px; margin-top: 15px;">
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="被保人年龄" align="center" width="200">
          <template slot-scope="scope">
            <el-tag>{{scope.row.ageMin}} ~ {{scope.row.ageMax}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="等待期" align="center" width="150">
          <template slot-scope="scope">
            <el-tag>{{scope.row.waitingPeriod}}天</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="费率表基数金额" prop="rateBaseFee" align="center" width="200" />

        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.state) === 1">激活</el-tag>
            <el-tag v-if="parseInt(scope.row.state) === 2" type="danger">冻结</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序号" prop="sortOrder" align="center" />
        <el-table-column label="创建时间" prop="createTime" align="center" width="100" />
        <el-table-column label="更新时间" prop="updateTime" align="center" width="100" />
        <el-table-column width="300" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <div style="display: flex;flex-wrap: wrap;">
              <el-link :underline="false" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
              <el-link :underline="false" type="primary" @click="handleCopy(scope.row)" style="margin-left:10px;">复制</el-link>
              <el-link v-if="parseInt(scope.row.state) === 2" :underline="false" style="margin-left:10px;"
                type="primary" @click="handleStatus(scope.row)">激活</el-link>
              <el-link v-if="parseInt(scope.row.state) === 1" :underline="false" style="margin-left:10px;" type="danger"
                @click="handleStatus(scope.row)">冻结</el-link>
              <el-link :underline="false" type="primary" style="margin-left:10px;"
                @click="openLabel(scope.row)">标签</el-link>
              <el-link :underline="false" type="primary" style="margin-left:10px;"
                @click="openRemark(scope.row)">备注</el-link>
              <el-link :underline="false" type="primary" style="margin-left:10px;"
                @click="openChannel(scope.row)">业务渠道</el-link>
              <el-link :underline="false" type="primary" style="margin-left:10px;"
                @click="openIndemnify(scope.row)">保障期</el-link>
              <el-link :underline="false" type="primary" style="margin-left:10px;"
                @click="openDutySeriousMust(scope.row)">保险责任</el-link>
              <el-link :underline="false" type="primary" style="margin-left:10px;"
                @click="openLimitAge(scope.row)">投保年龄</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex;justify-content: flex-end;margin: 20px 0 0;">
        <el-pagination :current-page="queryParam.page" :page-size="queryParam.limit" :page-sizes="[10, 20, 50, 100]"
          :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>

    <!-- 编辑 -->
    <a-modal :title="modal.title" :visible="modal.visible" maskClosable width="600px" @cancel="modal.visible = false"
      @ok="handleOk">
      <product-list-edit :modal="modal" :companyList="companyList" :rateTypeList="rateTypeList"
        :productTypeList="productTypeList" :groupList="groupList"></product-list-edit>
    </a-modal>

    <!-- 标签 -->
    <a-modal :title="modal.title" :visible="modal.visibleLabel" maskClosable destroyOnClose width="900px"
      @cancel="handleRefresh" @ok="handleRefresh">
      <product-list-label :productId="modal.currentId"></product-list-label>
    </a-modal>

    <!-- 备注 -->
    <a-modal :title="modal.title" :visible="modal.visibleRemark" maskClosable destroyOnClose width="900px"
      @cancel="modal.visibleRemark = false" @ok="handleRemark">
      <product-list-remark :productId="modal.currentId"></product-list-remark>
    </a-modal>

    <!-- 业务渠道 -->
    <a-modal :title="modal.title" :visible="modal.visibleChannel" maskClosable destroyOnClose width="900px"
      @cancel="handleRefresh" @ok="handleRefresh">
      <product-list-channel :productId="modal.currentId"></product-list-channel>
    </a-modal>

    <!-- 保障期 -->
    <a-modal :title="modal.title" :visible="modal.visibleIndemnify" maskClosable destroyOnClose width="1200px"
      @cancel="handleRefresh" @ok="handleRefresh">
      <product-list-indemnify :productId="modal.currentId"></product-list-indemnify>
    </a-modal>

    <!-- 重疾-必选责任 -->
    <duty-serious-must-list :productId="modal.currentId" :productIndemnifyId="modal.productIndemnifyId" :mdl="modal"
      @done="handleRefresh" />

    <!-- 投保年龄限制 -->
    <a-modal :title="modal.title" :visible="modal.visibleLimitAge" maskClosable destroyOnClose width="1200px"
      @cancel="handleRefresh" @ok="handleRefresh">
      <product-limit-age :productId="modal.currentId"></product-limit-age>
    </a-modal>
      
  </page-header-wrapper>
</template>

<script>
  import {
    addProduct,
    listByPageProduct,
    updateProduct,
    frozenProduct,
    activeProduct,
    copyProduct
  } from '@/api/insurance'

  import { listAllCompany } from '@/api/company'
  import {
    add,
    listByPage,
    update
  } from '@/api/channel'

  import SurveyListTopic from '../survey/components/survey-list-topic'
  import ProductListLabel from '../aibao/components/product-list-label'
  import ProductListEdit from '../aibao/components/product-list-edit'
  import ProductListRemark from '../aibao/components/product-list-remark'
  import ProductListChannel from '../aibao/components/product-list-channel'
  import ProductListIndemnify from '../aibao/components/product-list-indemnify/indemnify-list' //保障期列表
  import ProductLimitAge from '../aibao/components/product-limit-age/product-limit-age-list' //投保年龄限制
  import dutySeriousMustList from '../aibao/components/product-duty-serious-must/duty-serious-must-list'

  const baseApi = process.env.VUE_APP_API_BASE_URL

  export default {
    name: 'Index',
    components: {
      SurveyListTopic,
      ProductListEdit,
      ProductListLabel,
      ProductListRemark,
      ProductListChannel,
      ProductListIndemnify,
      ProductLimitAge,
      dutySeriousMustList,
    },
    data() {
      return {
        // 保险公司
        companyList: [],
        // 险种类型:1重疾险｜2寿险｜3医疗险｜4意外险
        productTypeList: [
          { value: 1, label: '重疾险' },
          { value: 2, label: '寿险' },
          { value: 3, label: '医疗险' },
          { value: 4, label: '意外险' },
        ],
        stateList: [
          { value: 1, label: '激活' },
          { value: 2, label: '冻结' },
        ],
        rateTypeList: [
          { value: 1, label: '按保额' }
        ],
        groupList: [
          { value: 0, label: '否' },
          { value: 1, label: '是' },
        ],
        queryParam: {
          page: 1,
          limit: 20,
        },
        total: 0,
        modal: {
          visible: false, //新增、编辑
          visibleLabel: false, //标签
          visibleRemark: false, //备注
          visibleChannel: false, //渠道
          visibleIndemnify: false, //保障期
          visibleDutySeriousMust: false, //重疾必选责任
          visibleLimitAge: false, //投保年龄限制
          currentId: '',
          companyId: '',
          title: '',
          form: {}
        },
        tableData: []
      }
    },
    mounted() {
      this.listAllCompany()
      this.getTable()
    },
    methods: {
      
      // 保司筛选，2025年7月4日14:03:07
      filterOption (input, option) {
          return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },
      
      // 开发中提示，2025年1月17日11:04:02
      handleDoing() {
        this.$message.success('功能开发中...')
      },

      // 关闭刷新table，2025年1月18日17:23:03
      handleRefresh() {
        this.modal.visibleLabel = false;
        this.modal.visibleIndemnify = false
        this.modal.visibleChannel = false;
        this.modal.visibleDutySeriousMust = false
        this.modal.visibleLimitAge = false
        this.queryParam.page = 1
        this.getTable()
      },
      listAllCompany() {
        listAllCompany({
          state: 1
        }).then(res => {
          this.companyList = res.data
        }).catch(() => {})
      },

      query() {
        this.queryParam.page = 1
        this.getTable()
      },

      reset() {
        this.queryParam = {
          page: 1,
          limit: 20
        }
        this.getTable()
      },

      handleSizeChange(val) {
        this.queryParam.limit = val
        this.getTable()
      },

      handleCurrentChange(val) {
        this.queryParam.page = val
        this.getTable()
      },

      getTable() {
        listByPageProduct(this.queryParam).then(res => {
          this.tableData = res.data.records
          this.total = parseInt(res.data.total)
        }).catch(() => {})
      },

      // 编辑弹窗
      handleOk() {
        if (this.modal.form.id) {
          updateProduct({
            ...this.modal.form
          }).then(res => {
            this.$message.success(res.msg)
            this.modal.form = {}
            this.modal.visible = false
            this.queryParam.page = 1
            this.getTable()
          }).catch(() => {})
        } else {
          this.modal.form.state = 1
          addProduct({
            ...this.modal.form
          }).then(res => {
            this.$message.success(res.msg)
            this.modal.form = {}
            this.modal.visible = false
            this.queryParam.page = 1
            this.getTable()
          }).catch(() => {})
        }
      },

      // 新增
      handleAdd() {
        this.modal.form = {
          name: '',
          sortOrder: 100,
          productType: 1,
          companyId: '',
          recordName: '',
          ageMin: 0,
          ageMax: 0,
          rateType: 1,
          rateBaseFee: 1000,
          isGroup: 0,
          groupName: '',
          waitingPeriod: 0,
          id: ''
        }
        this.modal.visible = true
        this.modal.title = '新增'
      },

      // 编辑
      handleEdit(record) {
        const data = JSON.parse(JSON.stringify(record))
        this.modal.form = {
          productType: data.productType,
          companyId: data.companyId,
          name: data.name,
          sortOrder: data.sortOrder,
          recordName: data.recordName,
          ageMin: data.ageMin,
          ageMax: data.ageMax,
          rateType: data.rateType,
          rateBaseFee: data.rateBaseFee,
          isGroup: data.isGroup,
          groupName: data.groupName,
          waitingPeriod: data.waitingPeriod,
          id: data.id
        }
        this.modal.visible = true
        this.modal.title = '编辑'
      },

      // 复制，2025年6月3日16:50:27
      handleCopy(record) {
        this.$confirm(`您确定要复制吗？`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          copyProduct({"id": record.id}).then(() => {
            this.$message.success('操作成功')
            this.getTable()
          }).catch(() => {})
        }).catch(() => {})
      },

      // 打开标签
      openLabel(record) {
        this.modal.currentId = record.id
        this.modal.visibleLabel = true
        this.modal.title = '标签'
      },

      // 冻结 | 激活
      handleStatus(record) {
        this.$confirm(`您确定要${record.state === 1 ? '冻结' : '激活'}吗？`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = [];
          ids.push(record.id);
          if (record.state === 1) {
            frozenProduct(ids).then(() => {
              this.$message.success('冻结成功')
              this.getTable()
            }).catch(() => {})
          } else {
            activeProduct(ids).then(() => {
              this.$message.success('激活成功')
              this.queryParam.page = 1
              this.getTable()
            }).catch(() => {})
          }
        }).catch(() => {})
      },

      // 打开-备注
      openRemark(record) {
        this.modal.currentId = record.id
        this.modal.visibleRemark = true
        this.modal.title = '备注'
      },

      // 确认-备注
      handleRemark() {
        updateProduct({ ...this.modal.form }).then(res => {
          this.$message.success(res.msg)
          this.modal.form = {}
          this.modal.visibleRemark = false
          this.queryParam.page = 1
          this.getTable()
        }).catch(() => {})
      },

      // 打开-渠道
      openChannel(record) {
        this.modal.currentId = record.id
        this.modal.visibleChannel = true
        this.modal.title = '渠道'
      },

      // 打开-保障期
      openIndemnify(record) {
        this.modal.currentId = record.id
        this.modal.visibleIndemnify = true
        this.modal.title = '保障期'
      },
      
      // 打开-重疾必选责任
      openDutySeriousMust(record) {
        this.modal.currentId = record.id
        this.modal.productIndemnifyId = record.id
        this.modal.visibleDutySeriousMust = true
        this.modal.title = '保险责任'
      },
      
      // 打开-投保年龄限制
      openLimitAge(record) {
        this.modal.currentId = record.id
        this.modal.visibleLimitAge = true
        this.modal.title = '投保年龄限制'
      }
      
    }
  }
</script>

<style lang="less" scoped>
  .view-video {
    position: relative;

    .close {
      position: absolute;
      right: 15px;
      top: 0;
      cursor: pointer;
    }
  }

  /deep/.ant-modal-body {
    max-height: calc(80vh - 150px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #e3e3e6;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }
  }
</style>